<template>
  <el-main style="width: 90%; margin: auto">
    <!-- 轮播图 -->
    <el-row>
      <el-col>
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="(item, index) in imgs1" :key="index">
            <img style="width: 100%; height: 100%" :src="item" alt="" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <el-row
      style="
        width: 100%;
        height: 200px;
        box-shadow: 5px 10px 35px rgb(69, 66, 66);
      "
      class="imgs"
    >
    </el-row>
    <br />
    
    <el-row>
      <el-col
        :span="4"
        v-for="brand in brands"
        :key="brand.bid"
        :offset="1"
        style="padding-left: 50px"
      >
        <router-link :to="{ name: 'brands1', params: { bid: brand.bid } }"> <!-- :to动态指定导航的路径或对象 params在路由导航时传递参数-->
        <el-card
          :body-style="{ padding: '0px' }"
          style="
            height: 350px;
            width: 350px;
            margin-top: 10px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
          "
        >
          <img
            :src="'http://127.0.0.1:3001/images/' + brand.img"
            alt="品牌图片"
            class="image"
            style="height: 260px; width: 100%"
          />
          <div style="text-align: center; font-size: 20px">
            <span style="display: inline-block">{{ brand.name }}</span>
          </div>
        </el-card>
        </router-link>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      imgs1: [// @代替src目录的路径,require引入文件或模块
        require("@/assets/images/header1.jpg"),
        require("@/assets/images/header2.jpg"),
        require("@/assets/images/header3.png"),
        require("@/assets/images/header4.jpg"),
        require("@/assets/images/header5.jpg"),
      ],
      brands: [],
    };
  },
  mounted() {//在组件实例被挂载到DOM后调用。表示组件已经完成了初始化
    this.fetchBrands();
  },
  methods: {
    fetchBrands() {
      this.axios
        .post("/api/goods/brands")
        .then((res) => {
          this.brands = res.data.data;
        })
        .catch((err) => {
          console.error(err.response ? err.response.data : err.message);
        });
    },
  },
};
</script>

<style>
.imgs {
  background-image: url(../assets/images/allbrand.png);
  background-size: 100% 100%;
}
.cols .el-col {
  margin-left: 10px;
}
</style>